import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Timeline, Button, Pagination } from 'antd';
import { stage, stage_status, operation_status, workType_status } from '@/common/contact'
const SetForm = (props) => {
  const { dispatch, visible = {}, id, hideFlag: showHide } = props;
  const [list, setList] = useState([])
  const [params, setParams] = useState({
    page: 1, limit: 5
  })
  const fetchData = () => {
    dispatch({
      type: 'subscriber/fetchUserAdminLog',
      payload: {
        organizationUserId: id,
        hideFlag: showHide,
      },
      callback: (e) => {
        setList(e)
      },
    });
  }
  useEffect(() => {
    fetchData()
  }, [])
  const hideFetch = (hideFlag, o) => {
    dispatch({
      type: 'weCom/fakeAdminLogHideFlag',
      payload: {
        hideFlag: hideFlag,
        id: o
      },
      callback: (e, total) => {
        fetchData()
      },
    });
  }
  const { page, limit } = params
  const filterList = (list) => {
    return list.map((item, index) => {
      const { stageInfo = {}, workType, operation, hideFlag, createTime, username, operationTypeDesc, operationAdminName } = item;
      if (index < page * limit && index >= (page - 1) * limit) {
        return (
          <Timeline.Item color="gray">
            <p>操作时间:{createTime}</p>
            <p>{operation === 'add' ? '绑定对象' : '解绑对象'}:{username}</p>
            <p>{operation === 'add' ? '绑定对象类型' : '解绑对象类型'}:{workType_status[workType]}</p>
            <p>操作状态:{operation_status[operation]}</p>
            <p>用户阶段:{stageInfo.stageName}</p>
            <p>操作项:{operationTypeDesc}</p>
            <p>操作人:{operationAdminName}</p>
            {showHide !== '0' && <div>
              <Button onClick={() => {
                hideFetch(hideFlag === '1' ? '0' : '1', item.id)
              }} type='link'>
                {hideFlag === '1' ? '显示' : '隐藏'}
              </Button>
            </div>}
          </Timeline.Item>
        );
      }
      return null
    });
  };
  return (
    <div>
      <Timeline direction="vertical">{filterList(list)}</Timeline>
      <Pagination onChange={(e) => {
        setParams({
          page: e,
          limit: 5
        })
      }} pageSize={5} current={params.page} total={list.length} />
    </div>

  );
};

export default connect(({ loading }) => ({
  loading: loading.effects['subscriber/fetchUserAdminLog'],
}))(SetForm);
